<template>
    <div>
        <h1>学生信息</h1>
        <table class="table" border="1">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>爱好</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in log" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.hobby}}</td>
                    <td>
                        <a @click="Editinfo(item.id)">修改</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup lang="ts">


import { useRouter } from 'vue-router';

const router = useRouter();

const log = ([


    {
        id:1,
        name:'张三',
        age:18,
        sex:'男',
        hobby:'打篮球'
    },
    {
        id:2,
        name:'李四',
        age:19,
        sex:'女',   
        hobby:'打羽毛球'
    }, 
])

const Editinfo=(id:number)=>{
    //push:用于导航到新的路由当中，它会根据提供参数url中，同是完成组件加载
    // router.push({
    //     path: "/Editinfo",
    //     query: { id: id }
    // })

    router.push({
        name:'Editinfo',
        params:{id:id}
    })



}
</script>